import React, { Component } from 'react';
   import {
   Platform,
  StyleSheet,
  Text,
   View,
  Image,
       TouchableOpacity,
       Button,
  Dimensions,

} from 'react-native';

 //引用插件
 import Swiper from 'react-native-swiper';

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

 export default class MyPageComponents extends Component {
  constructor(props) {
   super(props);
    this.state = {
    swiperShow: false,
    NavIcon:[],
        CountN:[],
        table:[
            {
                title:"书画作品",
                images:"./image/react_15.jpg",
            },
            {
                title:"旅游美食",
                images:"./image/react_16.jpg",
            },
            {
                title:"摄影展示",
                images:"./image/react_177.jpg",
            },
            {
                title:"个人作品",
                images:"./image/react_18.jpg",
            },
        ],
        content:[],
 }

}

 // 轮播图
renderBanner() {
      let Data = [];
    let navig = this.props.navigation;
     if (this.state.swiperShow) {
      console.log ('返回值' + this.state.swiperShow);

     return (
     <Swiper
       height={width * 40 / 100}
       showsButtons={false}
       removeClippedSubviews={false} //这个很主要啊，解决白屏问题
       autoplay={true}
       horizontal ={true}
       paginationStyle={styles.paginationStyle}
       dotStyle={styles.dotStyle}
       activeDotStyle={styles.activeDotStyle}
  >
         <TouchableOpacity onPress={()=>{
             navig.navigate('picture',{id:123})
         }}>
             <Image source={require('./image/react_15.jpg')} resizeMode="cover" style={styles.bannerImg} />
         </TouchableOpacity>
      <Image source={require('./image/react_16.jpg')} resizeMode="cover" style={styles.bannerImg} />
      <Image source={require('./image/177.jpg')} resizeMode="cover" style={styles.bannerImg} />
      <Image source={require('./image/react_18.jpg')} resizeMode="cover" style={styles.bannerImg} />
  </Swiper>

  );

} else {
   return (
      <View>
          <Image resizeMode="cover" source={require('./image/react_15.jpg')} style={styles.bannerImg} />
      </View>
    );
  }
}

componentDidMount() {
      this._DataMap();
  setTimeout(() => {
  this.setState({
      swiperShow: true,
  });
 }, 1)
  }
     _DataMap(){
      let DataS = [];
         let navig = this.props.navigation;
        this.state.table.map((item,index,data)=>{
            let DataImg = item.images;
            var text = (
                <TouchableOpacity onPress={()=>{
                    navigate.navigate('column',{id:6666,title:item.title,})
                }}>
                    <View key={index}>
                        <Image resizeMode="cover" style={ styles.imageIcon } source={ require("./image/react_17.png") }></Image>
                        <Text>{ item.title }</Text>
                    </View>
                </TouchableOpacity>
            )
            DataS.push(text);
        })
         this.setState({
             content:DataS,
         })
     }
getIcon(){   //图标组件的展示

    return (
        <View style={styles.container}>
            { this.state.content }
        </View>
    )
}
render() {
      var params = this.state.table;
      let navig = this.props.navigation;
    var news = [];//定义数组
    for(var i=0;i<params.length;i++) {//循环
        var  text = (
            <View key={ i } style={styles.Zcontainer}>
                <Text  style={{marginBottom: 10, fontSize: 14, marginLeft: 15, marginTop: 10}}>{params[i].title}</Text>
                <View style={styles.ImageContainer}>
                    <TouchableOpacity onPress={()=>{
                        navig.navigate('picture',{id:123})
                    }}>
                        <Image resizeMode="cover"  source={require('./image/react_15.jpg')} style={styles.contentN}></Image>
                    </TouchableOpacity>
                    <Image resizeMode="cover" source={require('./image/react_15.jpg')} style={styles.contentN}></Image>
                    <Image resizeMode="cover" source={require('./image/react_15.jpg')} style={styles.contentN}></Image>
                </View>
            </View>
        );
        news.push(text);//添加到news数组中
    }
return (
  <View>
  {this.renderBanner()}
  {this.getIcon()}
      {/*{this.getContent()}*/}
      {news}
  </View>
      );
   }
 }

 const styles = StyleSheet.create({
  container: {
      flexDirection:'row',
      flex:1,
      justifyContent:'space-around',
      marginTop:20,
      textAlign: 'center',
      backgroundColor:'#ffffff',
      paddingTop:20,
      paddingBottom:20,

},

   wrpaper: {
   width: width,
   height:width * 40 / 75,

  },

    paginationStyle: {
       bottom: 6,
     },
      dotStyle: {
       width: 22,
      height: 3,
     backgroundColor: '#fff',
     opacity: 0.4,
      borderRadius: 0,
   },
     activeDotStyle: {
          width: 22,
         height: 3,
       backgroundColor: '#fff',
        borderRadius: 0,
     },
     imageIcon:{
         width:50.25,
         height:50.25
     },
     contentN:{
      width:108,
         height:65
     },
     ImageContainer:{
      flex:1,
         flexDirection: 'row',
         justifyContent: 'space-around',
         paddingBottom: 20,
     },
     Zcontainer:{
      backgroundColor:"#ffffff",
         marginTop:10,
         marginBottom: 10
     }
});